<template>
  <div style="display: flex">
    <div class="servo-menu">
      <h4 style="margin: 10px 20px">天线详情</h4>
      <div style="width: 100%; height: 1px; background-color: #dfe4e8"></div>
      <div
        style="
          background-color: #f9f8fd;
          margin: 5px auto;
          display: flex;
        "
      >
        <div
          style="
            flex: 1;
            height: 230px;
            margin: 15px 5px;
            background-color: white;
          "
        >
          <img
            src="../../assets/images/u9607.png"
            style="width: 60px; height: 120px; margin: 45px 20px"
          />
        </div>
        <div style="flex: 6; height: 230px">
          <h3 style="color: #3366ff; margin: 10px">{{ servo.name }}</h3>
          <div
            style="
              line-height: 40px;
              display: inline-block;
              margin: 10px;
            "
          >
            方位:{{ servo.directionLocation }}<br />
            俯仰:{{ servo.pitchLocation }}<br />
            方位速度:{{ servo.directionSpeed }}<br />
            <!-- 厂商:{{}}<br /> -->
            状态:{{ servo.lockStatus == 0 ? "未锁定" : "锁定" }}
          </div>
          <div
            style="
              line-height: 40px;
              display: inline-block;
              margin: 10px 20px;
            "
          >
            目标方位:{{ servo.directionDestLocation }}<br />
            目标俯仰:{{ servo.pitchingDestLocation }}<br />
            俯仰速度:{{ servo.pitchSpeed }}<br />
            <!-- 安装时间:{{}} -->
          </div>
        </div>
        <!-- 电平图 -->
        <LevelDiagram ref="levelDiagram" />
      </div>
      <ChartComponents />
    </div>
    <div class="spectrum-menu">
      <h4 style="margin: 10px 20px">
        天线控制<el-button
          type="warning"
          size="small"
          @click="handleReturn()"
          style="position: absolute; right: 30px"
          >返回</el-button
        >
      </h4>
      <div style="width: 100%; height: 1px; background-color: #dfe4e8"></div>
      <div style="display: flex">
        <div style="flex: 1;">
          <!-- 伺服控制 -->
          <div class="right-block">
            <div class="block-title">&nbsp;&nbsp;伺服控制</div>
            <div style="height: 25vh;border-bottom:#ccc solid 1px;">
              <div class="sub-title">预置位置</div>
              <div style="display: flex">
                <div style="height: 8vh">
                  <div style="margin: 10px 10px 8px 10px">
                    设置步长:
                  </div>
                  <el-input
                    v-model="num"
                    size="mini"
                    style="width: 180px; margin-left: 10px"
                    class="servo-number"
                  ></el-input>
                  <button
                    type="button"
                    class="servo-button"
                    style="margin: 10px; width: 80px"
                    @click="openCalDialog"
                  >
                    计算步长
                  </button>
                </div>
                <div style="width: 8vh;margin-top: 10px">
                  <div
                    style="
                            width: 100px;
                            height: 100px;
                            border-radius: 60px;
                            background-color: #d7d7d7;
                        "
                  >
                    <div style="text-align: center">
                      <img
                        :src="pictureHover"
                        style="
                                width: 29px;
                                height: 18px;
                                margin-top: 8px;
                                cursor: pointer;
                            "
                        @mouseover="
                          pictureHover = require('../../assets/images/u19151_mouseOver.png')
                        "
                        @mouseleave="
                          pictureHover = require('../../assets/images/u19151.png')
                        "
                        @click="handleUp()"
                      />
                      <div style="width: 100px; height: 32px; margin-top: 5px">
                        <img
                          :src="pictureHover2"
                          style="
                                width: 18px;
                                height: 29px;
                                margin-right: 45px;
                                cursor: pointer;
                                "
                          @mouseover="
                            pictureHover2 = require('../../assets/images/u19152_mouseOver.png')
                          "
                          @mouseleave="
                            pictureHover2 = require('../../assets/images/u19152.png')
                          "
                          @click="handleLeft()"
                        />
                        <img
                          :src="pictureHover3"
                          style="width: 18px; height: 29px; cursor: pointer"
                          @mouseover="
                            pictureHover3 = require('../../assets/images/u19153_mouseOver.png')
                          "
                          @mouseleave="
                            pictureHover3 = require('../../assets/images/u19153.png')
                          "
                          @click="handleRight()"
                        />
                      </div>
                      <img
                        :src="pictureHover4"
                        style="
                                width: 29px;
                                height: 18px;
                                margin-top: 5px;
                                cursor: pointer;
                            "
                        @mouseover="
                          pictureHover4 = require('../../assets/images/u19154_mouseOver.png')
                        "
                        @mouseleave="
                          pictureHover4 = require('../../assets/images/u19154.png')
                        "
                        @click="handleDown()"
                      />
                    </div>
                  </div>
                </div>
              </div>
              <div style="height: 7vh; display: flex">
                <div style="width: 190px">
                  <div style="margin: 10px 10px 8px 10px">
                    预置方位角:
                  </div>
                  <el-input
                    size="mini"
                    style="width: 170px; margin-left: 10px"
                    class="servo-number"
                    v-model="azimuth"
                  ></el-input>
                </div>
                <div style="width: 190px">
                  <div style="margin: 10px 10px 8px 10px">
                    预置俯仰角:
                  </div>
                  <el-input
                    size="mini"
                    style="width: 170px; margin-left: 10px"
                    class="servo-number"
                    v-model="pitchAngle"
                  ></el-input>
                </div>
              </div>
              <div>
                <button
                  type="button"
                  class="servo-button"
                  style="margin: 5px 5px 5px 10px; width: 60px"
                  @click="handleSet()"
                >
                  预置
                </button>
                <button
                  type="button"
                  class="servo-button"
                  style="margin: 5px; width: 60px"
                  @click="antennaReadyBtn()"
                >
                  上电
                </button>
                <button
                  type="button"
                  class="servo-button"
                  style="margin: 5px; width: 60px"
                  @click="antennaCollectBtn()"
                >
                  收藏
                </button>
                <button
                  type="button"
                  class="servo-button-warning"
                  style="margin: 5px; width: 70px"
                  @click="antennaStopBtn()"
                >
                  紧急停车
                </button>
              </div>
            </div>
            <div style="height: 18vh;border-bottom:#ccc solid 1px;">
              <div class="sub-title">预置速度</div>
              <div style="height: 8vh; display: flex; width: 24vw;">
                <div style="flex:1;">
                  <div style="margin: 3px 10px 8px 10px">
                    方位速度:
                  </div>
                  <el-input-number
                    v-model="num1"
                    :min="-1"
                    :max="1"
                    :step="0.05"
                    size="mini"
                    style="width: 200px; margin-left: 10px"
                    class="servo-number"
                  ></el-input-number>
                </div>
                <div style="flex:1;">
                  <div style="margin: 3px 10px 8px 10px">
                    俯仰速度:
                  </div>
                  <el-input-number
                    v-model="num2"
                    :min="-1"
                    :max="1"
                    :step="0.05"
                    size="mini"
                    style="width: 200px; margin-left: 10px"
                    class="servo-number"
                  ></el-input-number>
                </div>
              </div>
              <button
                type="button"
                class="servo-button"
                style="margin: 0px 10px; width: 60px"
                @click="handleSpeedConfirm"
              >
                确认
              </button>
            </div>
            <div style="height: 40vh">
              <div class="sub-title">预置卫星</div>
              <div style="height: 7vh; display: flex">
                <div>
                  <div style="margin: 5px 10px 3px 10px">
                    定轨经度
                  </div>
                  <el-input
                    size="mini"
                    style="width: 250px; margin-left: 10px"
                    class="servo-number"
                    v-model="dgLon"
                  ></el-input>
                </div>
                <div>
                  <button
                    type="button"
                    class="enter-button"
                    style="margin: 33px 5px 5px 10px; width: 80px"
                    @click="lookSatellite"
                  >
                    切换卫星
                  </button>
                </div>
              </div>
              <div
                style="
                        height: 6vh;
                        display: flex;
                        margin-top: 10px;
                    "
              >
                <div style="width: 200px;">
                  <div style="margin: 5px 10px 3px 10px">
                    NORAD编号
                  </div>
                  <el-input
                    size="mini"
                    style="width: 180px; margin-left: 10px"
                    class="servo-number"
                    v-model="noradNum"
                  ></el-input>
                </div>
                <div style="width: 200px">
                  <div style=" margin: 5px 10px 3px 10px">
                    卫星名称
                  </div>
                  <el-input
                    size="mini"
                    style="width: 180px; margin-left: 10px"
                    class="servo-number"
                    v-model="satelliteName"
                  ></el-input>
                </div>
              </div>
              <div style="height: 5vh; display: flex">
                <div style="width: 200px">
                  <div style="margin: 0 10px 3px 10px">
                    地面经度
                  </div>
                  <el-input
                    size="mini"
                    style="width: 180px; margin-left: 10px"
                    class="servo-number"
                    v-model="groundLon"
                  ></el-input>
                </div>
                <div style="width: 200px">
                  <div style="margin: 0 10px 3px 10px">
                    地面纬度
                  </div>
                  <el-input
                    size="mini"
                    style="width: 180px; margin-left: 10px"
                    class="servo-number"
                    v-model="groundLat"
                  ></el-input>
                </div>
              </div>
              <div>
                <button
                  type="button"
                  class="enter-button"
                  style="margin: 10px; width: 70px"
                  @click="satelliteCal"
                >
                  计算
                </button>
              </div>
              <div
                style="
                        height: 6vhpx;
                        display: flex;
                        background-color: #f8f9fa;
                    "
              >
                <div style="width: 195px;height:7vh;">
                  <div style="margin: 5px 10px 3px 10px">
                    方位角
                  </div>
                  <el-input
                    size="mini"
                    style="width: 180px; margin-left: 10px"
                    class="servo-number"
                    v-model="trackDirection"
                  ></el-input>
                </div>
                <div style="width: 195px">
                  <div style="margin: 5px 10px 3px 10px">
                    俯仰角
                  </div>
                  <el-input
                    size="mini"
                    style="width: 180px; margin-left: 10px"
                    class="servo-number"
                    v-model="trackPitch"
                  ></el-input>
                </div>
              </div>
              <div style="height:5vh;">
                <button
                  type="button"
                  class="servo-button"
                  style="margin: 20px 5px 10px; width: 80px"
                  @click="getXingLi"
                >
                  星历引导
                </button>
                <button
                  type="button"
                  class="servo-button"
                  style="margin: 5px; width: 80px"
                  @click="handleSet()"
                >
                  常规引导
                </button>
                <button
                  type="button"
                  class="servo-button"
                  style="margin: 5px; width: 80px"
                  @click="getHistoryTracking"
                >
                  引导历史
                </button>
                <button
                  type="button"
                  class="servo-button"
                  style="margin: 5px; width: 80px"
                  @click="saveSatelliteInfo"
                >
                  保存参数
                </button>
              </div>
            </div>
          </div>
        </div>
        <div style="flex: 1;">
          <!-- 极化预设 -->
          <div class="right-block" style="height: 28vh">
            <div class="block-title">&nbsp;&nbsp;极化预设</div>
            <el-form
              ref="form"
              v-for="(item, index) in polarChannelDTOList"
              :key="index"
              label-position="left"
              label-width="80px"
              style="margin:10px;"
            >
              <el-form-item>
                <template #label>
                  <span style="color: #3366ff;">{{ item.channelName }}</span>
                </template>
                <div>
                  <span style="margin:0 2px 3px 10px">当前值:</span>
                  <el-input
                    size="mini"
                    style="width:50px;margin-left:2px"
                    class="servo-number"
                    v-model="item.currentValue"
                  ></el-input>
                  <span style="margin:0 2px 3px 10px">预置值:</span>
                  <el-input
                    size="mini"
                    style="width:50px;margin-left:2px"
                    class="servo-number"
                    v-model="item.expectValue"
                    @keyup.enter.native="handlePolarExpect(item)"
                  ></el-input>
                  <el-button
                    type="primary"
                    size="mini"
                    style="margin:0 10px;"
                    @click="handleNi(item)"
                    >逆</el-button
                  >
                  <el-button
                    type="primary"
                    size="mini"
                    style="margin:0 10px;"
                    @click="handleShun(item)"
                    >顺</el-button
                  >
                  <el-button
                    type="primary"
                    size="mini"
                    style="margin:0 10px;"
                    @click="handleStop(item)"
                    >停</el-button
                  >
                  <span style="color:#e6a23c;">{{
                    "(状态:" + item.status + ")"
                  }}</span>
                </div>
              </el-form-item>
            </el-form>
            <div style="margin: 0 20px;height:5vh;" v-show="flag">
              线圆转换&nbsp;&nbsp;
              <el-radio-group
                v-model="lineCircleRadio"
                @change="handleLineCircleRadio()"
              >
                <el-radio :label="1">线极化</el-radio>
                <el-radio :label="2">圆极化</el-radio>
                &nbsp;&nbsp;&nbsp;&nbsp;
              </el-radio-group>
              <span style="color:#e6a23c;">{{
                "(状态:" + xyStatus + ")"
              }}</span>
            </div>
          </div>
          <!-- 跟踪预设 -->
          <div class="right-block" style="height: 32vh">
            <div class="block-title">
              &nbsp;&nbsp;跟踪预设
              <div
                v-show="trackModel == 3"
                class="circle-point"
                :style="{ background: afcStatus == 1 ? 'green' : '#999' }"
                style="margin-left: 60%; margin-right: 5px"
              ></div>
              <span
                style="font-family: '宋体'; font-weight: 300"
                v-show="trackModel == 3"
                >AFC</span
              >
              <div
                v-show="trackModel == 3"
                class="circle-point"
                :style="{ background: remoteStatus == 0 ? 'green' : '#999' }"
                style="margin-left: 15px; margin-right: 5px"
              ></div>
              <span
                style="font-family: '宋体'; font-weight: 300"
                v-show="trackModel == 3"
                >本地</span
              >
              <div
                v-show="trackModel == 3"
                class="circle-point"
                :style="{ background: faultStatus == 1 ? 'red' : '#999' }"
                style="margin-left: 15px; margin-right: 5px"
              ></div>
              <span
                style="font-family: '宋体'; font-weight: 300"
                v-show="trackModel == 3"
                >故障</span
              >
            </div>
            <div style="width: 600px">
              <div style="margin: 5px 10px 3px 10px">
                跟踪模式
              </div>
              <el-select
                v-model="trackModel"
                placeholder="请选择"
                size="mini"
                class="servo-select"
                style="width: 280px; margin-left: 10px"
              >
                <el-option
                  v-for="item in trackOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <!-- <el-input size="mini" style="width:350px;margin-left:10px" class="servo-number" v-model="trackModel"></el-input> -->
              <div
                style="width: 600px; height: 53px; display: flex"
                v-show="trackModel == 1"
              >
                <div style="width: 300px">
                  <div style="margin: 0 10px 3px 10px">
                    方位范围
                  </div>
                  <el-input
                    size="mini"
                    style="width: 280px; margin-left: 10px"
                    class="servo-number"
                    v-model="directionRange"
                  ></el-input>
                </div>
                <div style="width: 300px">
                  <div style="margin: 0 10px 3px 10px">
                    俯仰范围
                  </div>
                  <el-input
                    size="mini"
                    style="width: 280px; margin-left: 10px"
                    class="servo-number"
                    v-model="pitchRange"
                  ></el-input>
                </div>
              </div>
              <!-- 新加 2023-11-17-->
              <div
                style="width: 600px; height: 53px; display: flex"
                v-show="trackModel == 1 && sifuModel =='ACS343'"
              >
              <div style="width: 300px">
                  <div style="margin: 0 10px 3px 10px">
                    方位步距
                  </div>
                  <el-input
                    size="mini"
                    style="width: 280px; margin-left: 10px"
                    class="servo-number"
                    v-model="directionStep"
                  ></el-input>
                </div>
                <div style="width: 300px">
                  <div style="margin: 0 10px 3px 10px">
                    俯仰步距
                  </div>
                  <el-input
                    size="mini"
                    style="width: 280px; margin-left: 10px"
                    class="servo-number"
                    v-model="pitchStep"
                  ></el-input>
                </div>
              </div>
            </div>
            <div style="width: 600px; display: flex" v-show="trackModel == 3">
              <div style="width: 290px">
                <div style="margin: 5px 10px 3px 10px">
                  当前频率
                </div>
                <el-input
                  size="mini"
                  style="width: 280px; margin-left: 10px"
                  class="servo-number"
                  v-model="currentFreq"
                ></el-input>
              </div>
            </div>
            <div style="width: 600px; display: flex" v-show="trackModel == 3">
              <div style="width: 290px">
                <div style="margin: 5px 10px 3px 10px">
                  预设频率（950.000~1750.000MHz）
                </div>
                <el-input
                  size="mini"
                  style="width: 280px; margin-left: 10px"
                  class="servo-number"
                  v-model="setFreq"
                ></el-input>
              </div>
            </div>
            <div style="margin-top: 10px" v-show="trackModel == 3">
              <button
                type="button"
                class="servo-button"
                style="margin: 5px 5px 5px 10px; width: 90px"
                @click="changeControl"
                v-if="remoteStatus == 0"
              >
                切换到遥控
              </button>
              <button
                type="button"
                class="servo-button"
                style="margin: 5px 5px 5px 10px; width: 90px"
                @click="changeLocal"
                v-else
              >
                切换到本地
              </button>
              <button
                type="button"
                class="servo-button"
                style="margin: 5px; width: 80px"
                @click="openAFC"
                v-if="afcStatus == 0"
              >
                开启AFC
              </button>
              <button
                type="button"
                class="servo-button"
                style="margin: 5px; width: 80px"
                @click="closeAFC"
                v-else
              >
                关闭AFC
              </button>
            </div>
            <div
              style="margin: 5px 5px 5px 10px; fontsize: 12px"
              v-show="trackModel == 2"
            >
              <div style="width: 290px" v-show="sifuModel == 'ACS343'">
                <div>
                  跟踪频率
                </div>
                <el-input
                  size="mini"
                  style="width: 280px;"
                  class="servo-number"
                  v-model="trackFrequency"
                ></el-input>
              </div>
              (状态:{{ setpTrackStatus }})
            </div>
            <button
              type="button"
              class="enter-button"
              style="margin: 20px 5px 5px 10px; width: 70px"
              @click="handleTrackConfirm"
            >
              确认
            </button>
          </div>
          <!-- 告警/任务 -->
          <div class="right-block" style="height: calc(23vh + 27px)">
            <div class="block-title">
              <el-radio-group
                v-model="radio"
                size="mini"
                style="margin-top: -3px"
              >
                <el-radio-button label="设备状态"></el-radio-button>
                <el-radio-button label="任务"></el-radio-button>
              </el-radio-group>
            </div>
            <div style="padding:5px;" v-if="radio == '设备状态'">
              设备:
              <el-select
                v-model="deviceType"
                placeholder="请选择"
                size="mini"
                class="servo-select"
                style="width: 120px; margin-left: 10px"
              >
                <el-option
                  v-for="item in deviceOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              &nbsp;&nbsp;故障等级:
              <el-select
                v-model="faultType"
                placeholder="请选择"
                size="mini"
                class="servo-select"
                style="width: 120px; margin-left: 10px"
              >
                <el-option
                  v-for="item in faultOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <div
                style="height: 18vh; overflow-y: auto; overflow-x: hidden"
                class="warning-text"
              >
                <div
                  style="
                    width: 100%;
                    height: 7vh;
                    display: flex;
                    border-bottom: solid 1px #ccc;
                  "
                  v-for="(item, index) in warningInfoList"
                  :key="index"
                >
                  <div
                    class="warning-signal"
                    :style="{ color: item.level == 1 ? 'red' : 'green' }"
                    style="background-color: #ffeeee"
                  >
                    <div
                      class="circle-point"
                      :style="{ background: item.level == 1 ? 'red' : 'green' }"
                    ></div>
                    {{ item.level == 1 ? "告警" : "正常" }}
                  </div>
                  <div
                    style="
                      width: 480px;
                      height: 50px;
                      margin: 10px 0 0 20px;
                    "
                  >
                    设备:{{
                      item.typeCode == "SERVO_MANAGE"
                        ? "伺服"
                        : item.typeCode == "POLAR_MANAGE"
                        ? "极化"
                        : "跟踪接收机"
                    }}
                    <div
                      style="
                        display: inline-block;
                        margin-left: 50px;
                        color: #999;
                      "
                    >
                      时间:{{ formatTimestamp(item.time) }}
                    </div>
                    <br />
                    <div
                      :title="item.content"
                      style="
                        margin: 1vh 0px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                      "
                    >
                      描述: {{ item.content }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              style="height: 21vh; overflow-y: auto; overflow-x: hidden"
              class="warning-text"
              v-if="radio == '任务'"
            >
              <!-- 列表区域 -->
              <div class="taskList">
                <div
                  class="item"
                  v-for="item in taskData"
                  :key="item.id"
                  style="padding: 5px;"
                >
                  <div class="label">
                    任务状态: {{ item.status === 1 ? "执行中" : "任务结束" }}
                  </div>
                  <div class="label">
                    任务类型:
                    {{ item.taskType === 1 ? "星历任务" : "历史任务" }}
                  </div>
                  <div class="label">
                    {{ item.startTime }} - {{ item.stopTime }}
                  </div>
                  <div style="width: 100%; height: 30px; line-height: 30px;">
                    <el-button
                      type="primary"
                      size="mini"
                      @click="lookTask(item.id)"
                      >查看任务</el-button
                    >
                    <el-button
                      type="primary"
                      size="mini"
                      @click="stopTask(item)"
                      >停止任务</el-button
                    >
                  </div>
                </div>
              </div>

              <!-- <div class="table">
                <el-table :data="taskData" border stripe max-height="280">
                  <el-table-column
                    align="center"
                    prop="taskType"
                    label="任务类型"
                    width="78"
                  >
                    <template slot-scope="{ row }">
                      {{ row.taskType === 1 ? "星历任务" : "历史任务" }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="status"
                    label="任务状态"
                    width="78"
                  >
                    <template slot-scope="{ row }">
                      {{ row.status === 1 ? "执行中" : "任务结束" }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="startTime"
                    label="起始时间"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="stop"
                    label="停止时间"
                  >
                  </el-table-column>

                  <el-table-column align="center" label="操作" width="200">
                    <template slot-scope="{ row }">
                      <el-button
                        type="primary"
                        size="mini"
                        @click="lookTask(row.id)"
                        >查看任务</el-button
                      >
                      <el-button
                        type="primary"
                        size="mini"
                        @click="stopTask(row)"
                        >停止任务</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div> -->
            </div>
          </div>
        </div>
      </div>
      <el-dialog
        title="星历列表"
        :visible.sync="showXingLiDialog"
        :close-on-click-modal="false"
        element-loading-background="rgba(0, 0, 0, 0.5)"
        width="50%"
        top="5%"
        class="xingLiDialog"
      >
        <!-- 操作区域 -->
        <div class="btns">
          <!-- accept文件格式限制 -->
          <input
            id="excelfile"
            type="file"
            style="display: none"
            accept=".xls,.xlsx,.csv"
            ref="selectFileInput"
            @change="uploadFile"
          />
          <el-button
            type="primary"
            size="small"
            @click="$refs.selectFileInput.click()"
            :disabled="xingLiStatus === 1"
            >上传文件</el-button
          >
          <el-button
            type="danger"
            size="small"
            @click="delXingLi"
            :disabled="xingLiStatus === 1"
            >一键删除</el-button
          >
          <el-button
            type="primary"
            size="small"
            @click="trackXingLi"
            v-if="xingLiStatus === 0"
            >开始引导</el-button
          >
          <el-button type="primary" size="small" @click="stopTrack" v-else
            >停止引导</el-button
          >
        </div>

        <!-- 列表区域 -->
        <div class="table">
          <el-table :data="xingLiData" border stripe max-height="500">
            <el-table-column
              align="center"
              prop="directionDestLocation"
              label="方位目标位置"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="pitchingDestLocation"
              label="俯仰目标位置"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="trackingTime"
              label="触发时间"
            >
              <!-- <template slot-scope="{ row }">
              {{ formatDate(row.trackingTime) }}
            </template> -->
            </el-table-column>
            <el-table-column align="center" prop="status" label="状态">
              <template slot-scope="{ row }">
                {{ mapStatus[row.status] }}
              </template>
            </el-table-column>
          </el-table>
        </div>

        <span></span>
      </el-dialog>

      <el-dialog
        title="卫星列表"
        :visible.sync="showWeiXingDialog"
        :close-on-click-modal="false"
        element-loading-background="rgba(0, 0, 0, 0.5)"
        width="50%"
        top="5%"
        class="xingLiDialog"
      >
        <!-- 列表区域 -->
        <div class="table">
          <el-table
            :data="weiXingData"
            border
            stripe
            max-height="500"
            @row-click="backfill"
          >
            <el-table-column align="center" prop="noradNum" label="NORAD编号">
            </el-table-column>
            <el-table-column
              align="center"
              prop="satelliteName"
              label="卫星名称"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="satelliteLongitude"
              label="卫星经度"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="directionDestLocation"
              label="方位位置"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="groundLatitude"
              label="地面经度"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="groundLatitude"
              label="地面纬度"
            >
            </el-table-column>

            <el-table-column
              align="center"
              prop="pitchingDestLocation"
              label="俯仰位置"
            >
            </el-table-column>
          </el-table>
        </div>

        <span></span>
      </el-dialog>

      <el-dialog
        title="任务列表"
        :visible.sync="showTaskDialog"
        :close-on-click-modal="false"
        element-loading-background="rgba(0, 0, 0, 0.5)"
        width="50%"
        top="5%"
        class="xingLiDialog"
      >
        <!-- 列表区域 -->
        <div class="table">
          <el-table :data="taskList" border stripe max-height="500">
            <el-table-column
              align="center"
              prop="directionDestLocation"
              label="方位目标位置"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="pitchingDestLocation"
              label="俯仰目标位置"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="trackingTime"
              label="触发时间"
            >
              <!-- <template slot-scope="{ row }">
              {{ formatDate(row.trackingTime) }}
            </template> -->
            </el-table-column>
            <el-table-column align="center" prop="status" label="状态">
              <template slot-scope="{ row }">
                <span :class="{ green: row.status == '1' }">{{
                  mapStatus[row.status]
                }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <span></span>
      </el-dialog>

      <el-dialog
        title="引导历史列表"
        :visible.sync="showHistoryTrackDialog"
        :close-on-click-modal="false"
        element-loading-background="rgba(0, 0, 0, 0.5)"
        width="50%"
        top="5%"
        class="xingLiDialog"
      >
        <!-- 操作区域 -->
        <div class="btns">
          <el-date-picker
            v-model="trackingTime"
            type="date"
            placeholder="选择日期"
            align="right"
            size="small"
            style="margin-right: 20px;"
          >
          </el-date-picker>
          <el-button type="primary" size="small" @click="getHistoryTracking"
            >搜索</el-button
          >

          <el-button
            type="primary"
            size="small"
            @click="trackHistory"
            v-if="historyTrackStatus === 0"
            >开始引导</el-button
          >
          <el-button
            type="primary"
            size="small"
            @click="stopTrackHistory"
            v-else
            >停止引导</el-button
          >
        </div>

        <!-- 列表区域 -->
        <div class="table">
          <el-table
            ref="multipleTable"
            class="multipleTable"
            :data="historyTrackData"
            border
            stripe
            max-height="500"
          >
            <el-table-column align="center" type="selection" width="50">
            </el-table-column>
            <el-table-column
              align="center"
              label="序号"
              type="index"
              width="50"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="directionLocation"
              label="方位位置"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="pitchingLocation"
              label="俯仰位置"
            >
            </el-table-column>
            <el-table-column align="center" prop="trackingTime" label="时间">
              <!-- <template slot-scope="{ row }">
              {{ formatDate(row.trackingTime) }}
            </template> -->
            </el-table-column>
            <el-table-column align="center" prop="status" label="状态">
              <template slot-scope="{ row }">
                {{ mapStatus[row.status] }}
              </template>
            </el-table-column>
          </el-table>
        </div>

        <span></span>
      </el-dialog>
    </div>
    <CalDialog ref="calDialogRef" @getStep="getStep"></CalDialog>
    <CollectDialog
      ref="collectDialogRef"
      :anteId="anteId"
      :sifuDeviceNo="sifuDeviceNo"
    ></CollectDialog>
  </div>
</template>
<script>
import {
  Themes,
  lightningChart,
  AxisTickStrategies,
  PalettedFill,
  emptyFill,
  LUT,
  ColorRGBA,
} from "@arction/lcjs";
import ChartComponents from "@/views/ChartComponents/index.vue";

import { KdSpectrum, Oscillogram } from "../charts";
import Constellation from "./components/constellation.vue";
import EyeChart from "./components/eyeChart.vue";
import CalDialog from "./components/calStep.vue";
import CollectDialog from "./components/collect.vue";
import LevelDiagram from "@/views/ChartComponents/LevelDiagram.vue";
import {
  changeAntennaRange,
  satelliteCal,
  speed,
  antennaReady,
  antennaStop,
  autoSearch,
  antennaStepTrack,
  manualDirection,
  polarLocation,
  trackAfcApi,
  trackSetFreq,
  trackRemote,
  getXingLiAPI,
  xingLiImportAPI,
  delXingLiAPI,
  trackXingLiAPI,
  getDeviceParamsAPI,
  getXingLiStatusAPI,
  stopTrackXingLiAPI,
  saveSatelliteInfoAPI,
  lookSatelliteAPI,
  getTaskListAPI,
  lookTaskAPI,
  stopTaskAPI,
  getHistoryTrackingAPI,
  getHistoryTrackStatusAPI,
  trackHistoryAPI,
  stopTrackHistoryAPI,
} from "../../api/tansfer";
export default {
  name: "ServoComponent", // 伺服传动装置组件
  components: {
    KdSpectrum,
    Oscillogram,
    Constellation,
    EyeChart,
    CalDialog,
    CollectDialog,
    ChartComponents,
    LevelDiagram,
  },
  data() {
    return {
      mapStatus: ["未跟踪", "已跟踪", "作废"],
      servo: {
        name: "16米5 C/X/Ku频段天线",
        directionDestLocation: "201.000",
        directionErrorMsg: "方位准备开关未按下;",
        directionLocation: "200.000",
        directionSpeed: "0.000",
        pitchDestLocation: "58.617",
        pitchErrorMsg: "俯仰准备开关未按下;",
        pitchLocation: "50.000",
        pitchSpeed: "0.001",
        control: "远控",
        health: "正常",
        healthClass: "state-normal",
        lock: "锁定",
        lockClass: "state-normal",
      },
      num: 0,
      num1: 0,
      num2: 0,
      reDirection: 120.876,
      rePitch: 65.4321,
      dgLon: 48.963,
      noradNum: "001",
      satelliteName: "2010-011A",
      trackModel: 1,
      // 通道选择
      trackOptions: [
        {
          value: 1,
          label: "自动搜索",
        },
        {
          value: 2,
          label: "步进跟踪",
        },
        // {
        //   value: 3,
        //   label: "记忆跟踪",
        // },
        {
          value: 3,
          label: "信标跟踪",
        },
      ],
      beaconValue: "221324",
      beaconOptions: [
        {
          value: 1,
          label: "221324",
        },
        {
          value: 2,
          label: "221000",
        },
        {
          value: 3,
          label: "266666",
        },
      ],
      directionRange: 10,
      pitchRange: 10,
      beaconBand: "Ku",
      beaconBandOptions: [
        {
          value: 1,
          label: "Ku",
        },
        {
          value: 2,
          label: "C",
        },
      ],
      beaconPolar: "Cr",
      beaconPolarOptions: [
        {
          value: 1,
          label: "Cr",
        },
      ],
      trackLevel: 5.11,
      unlockLevel: 10.0,
      trackDirection: 123.456,
      trackPitch: 65.432,
      checkList: [],
      checkList2: [],
      radio: "设备状态",
      value: 1,
      hover: [false, false, false, false],
      pictureHover: require("../../assets/images/u19151.png"),
      pictureHover2: require("../../assets/images/u19152.png"),
      pictureHover3: require("../../assets/images/u19153.png"),
      pictureHover4: require("../../assets/images/u19154.png"),
      anteId: null,
      azimuth: null,
      pitchAngle: null,
      sifuDeviceNo: null,
      polarDeviceNo: null,
      trackDeviceNo: null,
      groundLon: null,
      groundLat: null,
      polarStatusDTO: null,
      polarChannelDTOList: [],
      polarChannelDTO: {
        channelName: "",
        channelNo: "",
        currentValue: "",
        expectValue: "",
        status: "",
      },
      polarExpectKu: 0,
      flag: false,
      xyStatus: "",
      xyChannelNo: null,
      lineCircleRadio: 1,
      polarCurrentKu: null,
      polarCurrentC: null,
      polarExpectC: 0,
      polarCurrentX: null,
      polarExpectX: 0,
      polarKuFlag: false,
      polarCFlag: false,
      polarXFlag: false,
      channelNoKu: null,
      channelNoC: null,
      channelNoX: null,
      deviceOptions: [
        {
          value: "SERVO_MANAGE",
          label: "伺服",
        },
        {
          value: "POLAR_MANAGE",
          label: "极化",
        },
        {
          value: "TRACK",
          label: "跟踪接收机",
        },
        {
          value: "ALL",
          label: "全部",
        },
      ],
      deviceType: "ALL",
      faultOptions: [
        {
          value: 0,
          label: "正常",
        },
        {
          value: 1,
          label: "告警",
        },
        {
          value: 2,
          label: "全部",
        },
      ],
      faultType: 2,
      setFreq: null,
      currentFreq: null,
      trackStatusDTO: null,
      afcStatus: 0,
      faultStatus: 0,
      remoteStatus: 0,
      setpTrackStatus: null,
      electricalLevel: null,
      warningInfoList: [],
      polarExpect: 0,

      showXingLiDialog: false,
      xingLiData: [],
      xingLiStatus: 0,
      showWeiXingDialog: false,
      weiXingData: [],

      // 任务列表
      taskData: [],

      showTaskDialog: false,
      taskList: [],

      // 历史引导列表
      historyTrackData: [],
      showHistoryTrackDialog: false,
      historyTrackStatus: 0,
      trackingTime: null,

      sifuModel:"",
      directionStep:0,
      pitchStep:0,
      trackFrequency:0,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.anteId = this.$route.query.anteId;
      this.getDeviceParams();
      this.initWebSocket();
    });
  },
  watch: {
    radio: {
      handler(newVal) {
        if (newVal === "任务") {
          this.getTaskList();
        }
      },
    }
  },
  beforeDestroy() {
    this.webSocket && this.webSocket.close();
  },
  methods: {
    getDeviceParams() {
      this.polarChannelDTOList = [];
      getDeviceParamsAPI(this.anteId).then((res) => {
        if (res && res.data && res.data.data) {
          let data = res.data.data;
          if(data.sifuDeviceInfoDTO){
            this.sifuDeviceNo = data.sifuDeviceInfoDTO.deviceNo;
            this.sifuModel = data.sifuDeviceInfoDTO.model
          }
          if(data.polarDeviceInfoDTO && data.polarDeviceInfoDTO.portList && data.polarDeviceInfoDTO.portList.length > 0){
            this.polarDeviceNo = data.polarDeviceInfoDTO.deviceNo;
            data.polarDeviceInfoDTO.portList.map((item) => {
              if (item.portName == "线圆") {
                this.flag = true;
              }
            });
            let list = data.polarDeviceInfoDTO.portList.filter(
              (item) => item.portName != "线圆"
            );
            list.map((item) => {
              this.polarChannelDTO = {
                channelName: "",
                channelNo: "",
                currentValue: "",
                expectValue: "",
                status: "",
              };
              this.polarChannelDTO.channelName = item.portName;
              this.polarChannelDTO.channelNo = item.portNo;
              this.polarChannelDTOList.push(this.polarChannelDTO);
            });
          }else if(data.sifuDeviceInfoDTO && data.sifuDeviceInfoDTO.portList && data.sifuDeviceInfoDTO.portList.length > 0){
            this.polarDeviceNo = data.sifuDeviceInfoDTO.deviceNo;
            data.sifuDeviceInfoDTO.portList.map((item) => {
              if (item.portName == "线圆") {
                this.flag = true;
              }
            });
            let list = data.sifuDeviceInfoDTO.portList.filter(
              (item) => item.portName != "线圆"
            );
            list.map((item) => {
              this.polarChannelDTO = {
                channelName: "",
                channelNo: "",
                currentValue: "",
                expectValue: "",
                status: "",
              };
              this.polarChannelDTO.channelName = item.portName;
              this.polarChannelDTO.channelNo = item.portNo;
              this.polarChannelDTOList.push(this.polarChannelDTO);
            });
          }
          if(data.trackDeviceInfoDTO){
            this.trackDeviceNo = data.trackDeviceInfoDTO.deviceNo;
          }
        }
      });
    },
    openCalDialog() {
      this.$refs.calDialogRef.dialogVisible = true;
    },
    antennaCollectBtn() {
      this.$refs.collectDialogRef.dialogVisible = true;
    },
    getStep() {
      this.num = this.$refs.calDialogRef.step;
    },
    handleReturn() {
      this.$router.push({ path: "/" });
    },
    handleSet() {
      const param = {
        deviceNo: this.sifuDeviceNo,
        directionDestLocation: this.azimuth,
        pitchingDestLocation: this.pitchAngle,
      };
      changeAntennaRange(param)
        .then((res) => {
          this.$message({
            type: "success",
            message: "设置成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "设置失败",
          });
        });
    },
    satelliteCal() {
      const param = {
        satelliteLongitude: this.dgLon,
        groundLatitude: this.groundLat,
        groundLongitude: this.groundLon,
      };
      satelliteCal(param)
        .then((res) => {
          this.trackDirection = res.data.data.satelliteLongitude;
          this.trackPitch = res.data.data.pitchingDestLocation;
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "设置失败",
          });
        });
    },
    handleSpeedConfirm() {
      const param = {
        deviceNo: this.sifuDeviceNo,
        directionDestSpeed: this.num1,
        pitchingDestSpeed: this.num2,
      };
      speed(param)
        .then((res) => {
          this.$message({
            type: "success",
            message: "设置成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "设置失败",
          });
        });
    },
    handleTrackConfirm() {
      //自动搜索
      if (this.trackModel == 1) {
        if (this.directionRange > 10) {
          this.directionRange = 10;
          this.$message.warning("最大值为10");
        }
        if (this.pitchRange > 10) {
          this.pitchRange = 10;
          this.$message.warning("最大值为10");
        }
        const param = {
          deviceNo: this.sifuDeviceNo,
          directionSearchRange: this.directionRange,
          pitchSearchRange: this.pitchRange,
          directionStep:this.directionStep,
          pitchStep:this.pitchStep
        };
        console.log(param);
        autoSearch(param)
          .then((res) => {
            this.$message({
              type: "success",
              message: "设置成功",
            });
          })
          .catch(() => {
            this.$message({
              type: "error",
              message: "设置失败",
            });
          });
      }
      //步进跟踪
      if (this.trackModel == 2) {
        const param = {
          deviceNo: this.sifuDeviceNo,
          trackFrequency:this.trackFrequency,
        };
        console.log(param);
        antennaStepTrack(param)
          .then((res) => {
            this.$message({
              type: "success",
              message: "设置成功",
            });
          })
          .catch(() => {
            this.$message({
              type: "error",
              message: "设置失败",
            });
          });
      }
      //信标跟踪
      if (this.trackModel == 3) {
        const param = {
          deviceNo: this.trackDeviceNo,
          frequency: this.setFreq,
        };
        trackSetFreq(param)
          .then((res) => {
            this.$message({
              type: "success",
              message: "设置成功",
            });
          })
          .catch(() => {
            this.$message({
              type: "error",
              message: "设置失败",
            });
          });
      }
    },
    handleUp() {
      this.pitchAngle = (Number(this.pitchAngle) + Number(this.num)).toFixed(3);
      const param = {
        deviceNo: this.sifuDeviceNo,
        directionDestLocation: this.azimuth,
        pitchingDestLocation: this.pitchAngle,
      };
      changeAntennaRange(param)
        .then((res) => {
          this.$message({
            type: "success",
            message: "设置成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "设置失败",
          });
        });
    },
    handleDown() {
      this.pitchAngle = (Number(this.pitchAngle) - Number(this.num)).toFixed(3);
      const param = {
        deviceNo: this.sifuDeviceNo,
        directionDestLocation: this.azimuth,
        pitchingDestLocation: this.pitchAngle,
      };
      changeAntennaRange(param)
        .then((res) => {
          this.$message({
            type: "success",
            message: "设置成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "设置失败",
          });
        });
    },
    handleLeft() {
      this.azimuth = (Number(this.azimuth) - Number(this.num)).toFixed(3);
      const param = {
        deviceNo: this.sifuDeviceNo,
        directionDestLocation: this.azimuth,
        pitchingDestLocation: this.pitchAngle,
      };
      changeAntennaRange(param)
        .then((res) => {
          this.$message({
            type: "success",
            message: "设置成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "设置失败",
          });
        });
    },
    handleRight() {
      this.azimuth = (Number(this.azimuth) + Number(this.num)).toFixed(3);
      const param = {
        deviceNo: this.sifuDeviceNo,
        directionDestLocation: this.azimuth,
        pitchingDestLocation: this.pitchAngle,
      };
      changeAntennaRange(param)
        .then((res) => {
          this.$message({
            type: "success",
            message: "设置成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "设置失败",
          });
        });
    },
    antennaReadyBtn() {
      const param = {
        deviceNo: this.sifuDeviceNo,
      };
      antennaReady(param)
        .then((res) => {
          this.$message({
            type: "success",
            message: "设置成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "设置失败",
          });
        });
    },
    antennaStopBtn() {
      const param = {
        deviceNo: this.sifuDeviceNo,
      };
      antennaStop(param)
        .then((res) => {
          this.$message({
            type: "success",
            message: "设置成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "设置失败",
          });
        });
    },
    handleNi(item) {
      const param = {
        channelNo: item.channelNo,
        deviceNo: this.polarDeviceNo,
        turnDirection: 2,
      };
      manualDirection(param)
        .then((res) => {
          this.$message({
            type: "success",
            message: "设置成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "设置失败",
          });
        });
    },
    handleShun(item) {
      const param = {
        channelNo: item.channelNo,
        deviceNo: this.polarDeviceNo,
        turnDirection: 1,
      };
      manualDirection(param)
        .then((res) => {
          this.$message({
            type: "success",
            message: "设置成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "设置失败",
          });
        });
    },
    handleStop(item) {
      const param = {
        channelNo: item.channelNo,
        deviceNo: this.polarDeviceNo,
        turnDirection: 0,
      };
      manualDirection(param)
        .then((res) => {
          this.$message({
            type: "success",
            message: "设置成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "设置失败",
          });
        });
    },
    handlePolarExpect(item) {
      const param = {
        channelNo: item.channelNo,
        deviceNo: this.polarDeviceNo,
        destLocation: item.expectValue,
      };
      console.log(param);
      polarLocation(param)
        .then((res) => {
          this.$message({
            type: "success",
            message: "设置成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "设置失败",
          });
        });
    },
    handleLineCircleRadio() {
      const param = {
        channelNo: this.xyChannelNo,
        deviceNo: this.polarDeviceNo,
        turnDirection: this.lineCircleRadio,
      };
      manualDirection(param)
        .then((res) => {
          this.$message({
            type: "success",
            message: "设置成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "设置失败",
          });
        });
    },
    openAFC() {
      const param = {
        afcStatus: 1,
        deviceNo: this.trackDeviceNo,
      };
      trackAfcApi(param)
        .then((res) => {
          this.$message({
            type: "success",
            message: "设置成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "设置失败",
          });
        });
    },
    closeAFC() {
      const param = {
        afcStatus: 0,
        deviceNo: this.trackDeviceNo,
      };
      trackAfcApi(param)
        .then((res) => {
          this.$message({
            type: "success",
            message: "设置成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "设置失败",
          });
        });
    },
    changeControl() {
      const param = {
        remoteStatus: 1, //遥控
        deviceNo: this.trackDeviceNo,
      };
      trackRemote(param)
        .then((res) => {
          this.$message({
            type: "success",
            message: "设置成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "设置失败",
          });
        });
    },
    changeLocal() {
      const param = {
        remoteStatus: 0, //本地
        deviceNo: this.trackDeviceNo,
      };
      trackRemote(param)
        .then((res) => {
          this.$message({
            type: "success",
            message: "设置成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "设置失败",
          });
        });
    },
    formatTimestamp(timestamp, type) {
      if (!timestamp) return null;
      const date = new Date(timestamp); // 创建日期对象

      const year = date.getFullYear(); // 获取年份
      const month = String(date.getMonth() + 1).padStart(2, "0"); // 获取月份（注意月份从0开始，需要加1；并且补零）
      const day = String(date.getDate()).padStart(2, "0"); // 获取日期（补零）
      const hours = String(date.getHours()).padStart(2, "0"); // 获取小时（补零）
      const minutes = String(date.getMinutes()).padStart(2, "0"); // 获取分钟（补零）
      const seconds = String(date.getSeconds()).padStart(2, "0"); // 获取秒数（补零）

      let formattedDate;
      if (type === "date") {
        formattedDate = `${year}-${month}-${day}`;
      } else {
        formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; // 拼接成格式化的时间字符串
      }
      return formattedDate;
    },
    initWebSocket() {
      const wsuri = process.env.VUE_APP_WS_API + "/antenna/toec/yk/ws/1_12345678";
      this.webSocket = new WebSocket(wsuri);
      this.webSocket.onmessage = this.webSocketOnMessage;
      this.webSocket.onopen = this.webSocketOnOpen;
      this.webSocket.onerror = this.webSocketOnError;
      this.webSocket.onclose = this.webSocketClose;
    },
    webSocketOnOpen() {
      console.log("websocket已打开");
    },
    webSocketOnError() {
      console.log("websocket发生了错误");
    },
    webSocketOnMessage(e) {
      if (e.data) {
        let param = JSON.parse(e.data);
        param.map((item) => {
          if (item.anteId == this.anteId) {
            // console.log("当前天线下所有设备信息:");
            // console.log(item);
            let data = item;
            this.servo.name = data.anteName;
            //伺服
            if (data.sifuStatusDTO) {
              
              this.servo.directionDestLocation =
                data.sifuStatusDTO.directionDestLocation;
              this.servo.directionLocation =
                data.sifuStatusDTO.directionLocation;
              this.servo.directionSpeed = data.sifuStatusDTO.directionSpeed;
              this.servo.pitchDestLocation =
                data.sifuStatusDTO.pitchDestLocation;
              this.servo.pitchLocation = data.sifuStatusDTO.pitchLocation;
              this.servo.pitchingDestLocation =
                data.sifuStatusDTO.pitchingDestLocation;
              this.servo.pitchSpeed = data.sifuStatusDTO.pitchSpeed;
              this.servo.lockStatus = data.sifuStatusDTO.lockStatus;
              this.servo.lock =
                data.sifuStatusDTO.trackSign == "已锁定" ? "锁定" : "失锁";
              this.servo.lockClass =
                data.sifuStatusDTO.trackSign == "已锁定"
                  ? "state-normal"
                  : "state-normal";
              this.servo.health =
                data.sifuStatusDTO.directionErrorMsg == "" ? "正常" : "异常";
              this.servo.healthClass =
                data.sifuStatusDTO.directionErrorMsg == ""
                  ? "state-normal"
                  : "state-normal";
              this.setpTrackStatus = data.sifuStatusDTO.stepTrackStatus;
              this.electricalLevel = data.sifuStatusDTO.electricalLevel;
            
              if(this.azimuth == null){
                  this.azimuth = this.servo.directionLocation
              }
              if(this.pitchAngle == null){
                  this.pitchAngle = this.servo.pitchLocation
              }
              this.$refs.levelDiagram.drawChart(
                data.sifuStatusDTO.electricalLevel
              );
            }
            //极化
            if (
              data.polarStatusDTO &&
              data.polarStatusDTO.polarChannelDTOList
            ) {
              data.polarStatusDTO.polarChannelDTOList.map((item) => {
                if (item.channelName == "线圆") {
                  this.xyStatus = item.poleStatus;
                  this.xyChannelNo = item.channelNo;
                }
              });
              let list = data.polarStatusDTO.polarChannelDTOList.filter(
                (item) => item.channelName != "线圆"
              );
              // console.log(list);
              list.map((item) => {
                this.polarChannelDTOList.map((itemNext) => {
                  if (item.channelNo == itemNext.channelNo) {
                    itemNext.currentValue = item.poleLocation;
                    itemNext.status = item.poleStatus;
                  }
                });
              });
            }
            //跟踪接收机-设备
            if (data.trackStatusDTO) {
              this.trackStatusDTO = data.trackStatusDTO;
              this.afcStatus = this.trackStatusDTO.afcStatus;
              this.currentFreq = this.trackStatusDTO.frequency;
              this.faultStatus = Number(this.trackStatusDTO.faultStatus);
              this.remoteStatus = this.trackStatusDTO.remoteStatus;
            }
            //告警信息
            if (data.deviceMessageList) {
              let list = data.deviceMessageList;
              if (this.faultType == 2 && this.deviceType == "ALL") {
                this.warningInfoList = list;
              } else {
                if (this.deviceType == "ALL") {
                  list = list.filter((item) => item.level === this.faultType);
                } else if (this.faultType == 2) {
                  list = list.filter(
                    (item) => item.typeCode === this.deviceType
                  );
                } else {
                  list = list.filter((item) => item.level === this.faultType);
                  list = list.filter(
                    (item) => item.typeCode === this.deviceType
                  );
                }
                this.warningInfoList = list;
              }
            }
          }
        });
      }
    },
    webSocketClose(e) {
      console.log("断开连接", e);
    },
    // 获取星历列表
    async getXingLi() {
      try {
        const {
          data: { data },
        } = await getXingLiAPI(this.sifuDeviceNo);
        // console.log("星历列表:", data);
        this.xingLiData = data;
        await this.getXingLiStatus();
        if (!this.showXingLiDialog) this.showXingLiDialog = true;
      } catch (error) {
        console.log(error);
      }
    },
    // 上传文件
    async uploadFile(e) {
      // console.log("上传文件:", e.target.files[0]);
      let formData = new FormData();
      formData.append("file", e.target.files[0]);
      try {
        await xingLiImportAPI(formData, {
          deviceNo: this.sifuDeviceNo,
        });
        // console.log("data", data);
        this.$message.success("上传成功！");
        this.getXingLi();
      } catch (error) {
        console.log(error);
        this.$message.error("上传失败！");
      } finally {
        this.$refs.fileInput.value = "";
      }
    },
    // 一键删除星历数据
    delXingLi() {
      //删除的二次确认
      this.$confirm("将要删除所有星历数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        try {
          await delXingLiAPI({
            deviceNo: this.sifuDeviceNo,
          });

          // 重新调用查询列表接口
          this.getXingLi();
          this.$message.success("删除成功!");
        } catch (error) {
          console.log(error);
          this.$message.error(error);
        }
      });
    },
    // 引导星历数据
    async trackXingLi() {
      if (this.xingLiData.length === 0)
        return this.$message.warning("未找到星历数据！");
      try {
        await trackXingLiAPI({
          deviceNo: this.sifuDeviceNo,
        });
        await this.getXingLiStatus();
        this.$message.success("引导成功！");
      } catch (error) {
        console.log(error);
        this.$message.error("操作失败！");
      }
    },
    // 查询星历引导状态
    async getXingLiStatus() {
      try {
        const {
          data: { data },
        } = await getXingLiStatusAPI(this.sifuDeviceNo);
        // console.log("星历引导状态", data);
        this.xingLiStatus = data.status;
      } catch (error) {
        console.log(error);
      }
    },
    // 停止引导
    async stopTrack() {
      try {
        await stopTrackXingLiAPI({
          deviceNo: this.sifuDeviceNo,
        });
        await this.getXingLi();
        this.$message.success("停止引导成功！");
      } catch (error) {
        console.log(error);
        this.$message.error("操作失败！");
      }
    },
    closeDialog() {
      this.$refs.fileInput.value = "";
    },
    // 预置卫星-保存参数
    async saveSatelliteInfo() {
      try {
        await saveSatelliteInfoAPI({
          directionDestLocation: this.trackDirection,
          groundLatitude: this.groundLat,
          groundLongitude: this.groundLon,
          noradNum: this.noradNum,
          pitchingDestLocation: this.trackPitch,
          satelliteLongitude: this.dgLon,
          satelliteName: this.satelliteName,
        });
        this.$message.success("保存成功！");
      } catch (error) {
        console.log(error);
        this.$message.error("保存失败！");
      }
    },
    // 查询卫星列表
    async lookSatellite() {
      try {
        const {
          data: { data },
        } = await lookSatelliteAPI();
        // console.log("卫星列表", data);
        this.weiXingData = data;
        if (!this.showWeiXingDialog) this.showWeiXingDialog = true;
      } catch (error) {
        console.log(error);
      }
    },
    // 点击行数据，进行回填
    backfill(row) {
      this.trackDirection = row.directionDestLocation;
      this.groundLat = row.groundLatitude;
      this.groundLon = row.groundLongitude;
      this.noradNum = row.noradNum;
      this.trackPitch = row.pitchingDestLocation;
      this.dgLon = row.satelliteLongitude;
      this.satelliteName = row.satelliteName;
      this.showWeiXingDialog = false;
    },
    // 获取任务列表
    async getTaskList() {
      try {
        const {
          data: { data },
        } = await getTaskListAPI();
        // console.log("任务列表", data);
        this.taskData = data;
      } catch (error) {
        console.log(error);
      }
    },

    // 查看任务
    async lookTask(taskId) {
      try {
        const {
          data: { data },
        } = await lookTaskAPI(taskId);
        // console.log("查看任务结果", data);
        this.taskList = data;
        if (!this.showTaskDialog) this.showTaskDialog = true;
      } catch (error) {
        console.log(error);
      }
    },
    // 停止任务
    async stopTask(row) {
      if (row.status === 2) return this.$message.warning("该任务已经结束！");

      try {
        await stopTaskAPI({ taskId: row.id });
        await this.getTaskList();
        this.$message.success("任务停止成功！");
      } catch (error) {
        console.log(error);
        this.$message.error("操作失败！");
      }
    },
    // 获取历史引导列表
    async getHistoryTracking() {
      try {
        const {
          data: { data },
        } = await getHistoryTrackingAPI({
          deviceNo: this.sifuDeviceNo,
          trackingTime: this.formatTimestamp(this.trackingTime, "date"),
        });
        // console.log("历史引导列表:", data);
        this.historyTrackData = data;
        await this.getHistoryTrackStatus();
        if (!this.showHistoryTrackDialog) this.showHistoryTrackDialog = true;
      } catch (error) {
        console.log(error);
      }
    },
    // 查询历史引导状态
    async getHistoryTrackStatus() {
      try {
        const {
          data: { data },
        } = await getHistoryTrackStatusAPI(this.sifuDeviceNo);
        // console.log("历史引导状态", data);
        this.historyTrackStatus = data.status;
      } catch (error) {
        console.log(error);
      }
    },
    // 引导历史数据
    async trackHistory() {
      // console.log("this.$refs.multipleTable", this.$refs.multipleTable.selection);
      if (this.$refs.multipleTable.selection.length === 0)
        return this.$message.warning("请选择数据！");
      try {
        await trackHistoryAPI(this.$refs.multipleTable.selection);
        await this.getHistoryTrackStatus();
        this.$message.success("引导成功！");
      } catch (error) {
        console.log(error);
        this.$message.error("操作失败！");
      }
    },
    // 停止引导
    async stopTrackHistory() {
      try {
        await stopTrackHistoryAPI({
          deviceNo: this.sifuDeviceNo,
        });
        await this.getHistoryTracking();
        this.$message.success("停止引导成功！");
      } catch (error) {
        console.log(error);
        this.$message.error("操作失败！");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.servo-menu {
  flex: 2;
  margin: 10px;
  background-color: #ffffff;
  border-radius: 2px;
  height: 95vh;
  border: #ccc solid 1px;
}
.spectrum-menu {
  flex: 3;
  margin: 10px;
  background-color: #ffffff;
  border-radius: 2px;
  height: 95vh;
  border: #ccc solid 1px;
}
.servo-control {
  width: 74px;
  height: 28px;
  background-color: rgba(221, 227, 255, 1);
  box-sizing: border-box;
  border: 1px solid rgba(182, 226, 254, 1);
  border-radius: 0px;
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
  font-weight: 700;
  font-style: normal;
  color: #0033ff;
  text-align: center;
  line-height: 28px;
  margin: 5px 15px 15px 15px;
}
.servo-state {
  width: 5vw;
  height: 5vh;
  background-color: #f0fff0;
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: #33cc33;
  border-radius: 0px;
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
  font-weight: 700;
  font-style: normal;
  color: #000;
  text-align: center;
  line-height: 28px;
  margin: 15px;
}
.state-normal {
  height: 20px;
  color: #33cc33;
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
  font-weight: 700;
}
.chart-title {
  width: 48px;
  height: 24px;
  color: #fff;
  background-color: #0066ff;
  display: inline-block;
  line-height: 24px;
  text-align: center;
}
.dp {
  width: 100px;
  height: 20px;
  border: 1px solid #3366ff;
  text-align: center;
  line-height: 20px;
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
  font-weight: 700;
  color: #3366ff;
  margin-left: 15px;
}
.right-block {
  border: 1px solid rgb(224, 228, 233);
  margin: 10px;
}
.block-title {
  width: 100%;
  height: 28px;
  background-color: #f8f9fa;
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
  font-weight: 700;
  color: #000;
  line-height: 28px;
}
.servo-divider {
  width: 600px;
  height: 1px;
  margin: 10px auto;
  background-color: #e0e4e9;
}
.sub-title {
  margin: 7px 0 0 10px;
  color: #3366ff;
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
  font-weight: 700;
}
.servo-button-warning {
  background: #ffcccc;
  color: #ff0000;
  border: 1px solid #ff0000;
  height: 26px;
  cursor: pointer;
}
.servo-button {
  background: #d5ebff;
  color: #0066ff;
  border: 1px solid #0066ff;
  height: 26px;
  cursor: pointer;
}
.watch-button {
  background: #0066ff;
  color: #fff;
  border: 0;
  height: 26px;
  border-radius: 13px;
  cursor: pointer;
}
.enter-button {
  background: #0066ff;
  color: #fff;
  border: 0px;
  height: 26px;
  cursor: pointer;
}
.warning-signal {
  width: 16px;
  height: 48px;
  text-align: center;
  display: inline-block;
  //   margin-top: 5px;
}
.chart-checkbox {
  width: 380px;
  display: inline-block;
  margin-top: 3px;
  margin-left: 100px;
}
.chart-checkbox > .el-checkbox {
  margin-right: 10px;
}
.chart-checkbox > .el-checkbox > .el-checkbox__label {
  padding-left: 5px;
}
.circle-point {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  display: inline-block;
}
.servo-number > .el-input > .el-input__inner {
  border-radius: 0 !important;
  border: 1px solid #000 !important;
  padding: 0 39px !important;
  color: #0066ff !important;
}
.servo-number > .el-input__inner {
  border-radius: 0 !important;
  border: 1px solid #000 !important;
  color: #0066ff !important;
  padding: 0 7px;
}
.servo-select > .el-input > .el-input__inner {
  border-radius: 0 !important;
  border: 1px solid #000 !important;
  padding: 0 7px !important;
  color: #0066ff !important;
}
.el-radio {
  margin-right: 15px !important;
}
.el-radio__label {
  padding-left: 5px !important;
}
.el-radio-button__inner {
  padding: 8px 15px !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.warning-text::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.warning-text::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background-color: #0066ff;
}
.warning-text::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #ededed;
  border-radius: 10px;
}
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background-color: #0066ff !important;
}
.el-radio-button__inner {
  background-color: #f8f9fa !important;
}
.el-input-group__append {
  border-radius: 0 !important;
  background: #0066ff !important;
  color: #fff !important;
  border: 0px !important;
  padding: 0 15px !important;
}
.el-input__inner {
  border-radius: 0 !important;
  border: 1px solid #000 !important;
  padding: 0 7px !important;
  color: #0066ff !important;
}
.xingLiDialog {
  .btns {
    display: flex;
    height: 32px;
    line-height: 32px;
    padding: 0 10px;

    margin-bottom: 20px;
  }

  .green {
    color: #249746;
  }
}

.taskList {
  overflow-y: auto;
  .item {
    display: flex;
    flex-wrap: wrap;
    height: 80px;
    line-height: 80px;
    border-bottom: 1px solid #e0e0e0;
    color: #646567;
    .label {
      height: 30px;
      line-height: 30px;
      color: #646567;
      margin-right: 15px;
    }
  }
}

.multipleTable {
  /deep/ .el-input__inner {
    padding-left: 30px !important;
  }
}
</style>
